<template>
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark"><h4 style="line-height:36px;">活动管理</h4></div>
        </el-col>
        <el-col :span="24" v-show="!details">
            <div class="padding-content">
                <div style="display: flex;justify-content: flex-end;margin-bottom:20px;">
                    <el-button type="primary" size="small" @click="dialogTableVisible = true ">生成</el-button>
                </div>
                <div class="table">
                    <el-table
                        :data="list"
                        border
                        style="width: 100%"
                    >
                        <!-- <el-table-column
                            prop="id"
                            label="优惠券Id">
                        </el-table-column> -->
                        <el-table-column
                            prop="name"
                            label="优惠券名称">
                        </el-table-column>
                        <el-table-column
                            prop="method"
                            label="优惠券类型">
                        </el-table-column>
                        <el-table-column
                            label="额度">
                            <template slot-scope="scope">
                                <span v-if="scope.row.method == '立减券'">{{scope.row.now_reduce_money}}元</span>
                                <span v-if="scope.row.method == '满减券' || scope.row.method == '满减劵' ">{{scope.row.full_reduce}}</span>
                                <span v-if="scope.row.method == '折扣券' ">{{scope.row.discount}}折</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="商品类别">
                            <template slot-scope="scope">
                                <el-button type="text" v-if="scope.row.bind_type == 0" @click="bindDialog(scope.row)">限定商品</el-button>
                                <!-- <el-button type="text" v-if="scope.row.bind_type == 1">限定分类</el-button> -->
                                <el-tooltip placement="bottom" effect="light" v-if="scope.row.bind_type == 1">
                                    <div slot="content" class="tips-list">
                                        <div class="item" v-for="(item,index) in scope.row.limit_info" :key="index">{{item}}</div>
                                    </div>
                                    <el-button type="text">限定分类</el-button>
                                </el-tooltip>
                                <span v-if="scope.row.bind_type == 2">全部商品</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="过期时间">
                            <template slot-scope="scope">
                                <p v-if="todayTime>getDateTime(scope.row.expiration_time)" class="danger">
                                    {{scope.row.expiration_time}}（已过期）
                                </p>
                                <p v-else>
                                    {{scope.row.expiration_time}}
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="total_mount"
                            label="总数量">
                        </el-table-column>
                        <el-table-column
                            prop="used_mount"
                            label="已使用">
                        </el-table-column>
                        <el-table-column
                            label="详细信息">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="getDetails(scope.row.id)">查看券码</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <el-pagination
                layout="prev, pager, next"
                :total="list_page.total"
                :page-size="page_size"
                :current-page="list_page.page"
                @current-change="listPageChange">
            </el-pagination>
        </el-col>
        <el-col :span="24" v-show="details" style="margin:20px;">
            <el-button type="primary" @click="back">返回上一页</el-button>
            <el-table
                :data="code_info"
                stripe
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="名称">
                </el-table-column>
                <el-table-column
                    prop="expiration_time"
                    label="过期时间">
                </el-table-column>
                <el-table-column
                    prop="code"
                    label="兑换码">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态">
                    <template slot-scope="info">
                        <span :class="{'col-ccc':info.row.state == 0,'col-green':info.row.state == 1 }">{{info.row.state == '1'?'未使用':'已使用'}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                layout="prev, pager, next"
                :total="code_page.total"
                :page-size="page_size"
                :current-page='code_page.page'
                @current-change="codePageChange">
            </el-pagination>
        </el-col>
        <el-dialog :visible.sync="dialogTableVisible" title="添加优惠券">
            <div class="form-content">
                <div class="row">
                    <div class="item">
                        <label>活动名称:</label>
                        <el-input v-model="addCoupon.coupon_name" placeholder="请输入活动名称"></el-input>
                    </div>
                </div>
                <div class="row">
                    <div class="item">
                        <label>适用分类：</label>
                        <el-select v-model="addCoupon.bind_type" placeholder="请选择" style="width:70%;"> 
                            <el-option
                            v-for="item in bindTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="row" v-if="addCoupon.bind_type != 2">
                    <div class="item" v-if="addCoupon.bind_type == 1" style="width:100%">
                        <label style="width:15%">选择分类:</label>
                        <el-select v-model="addCoupon.categorys_id" placeholder="请选择" multiple style="width:30%;">
                            <el-option
                                v-for="item in category_id"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>

                    </div>
                    <div class="item" v-if="addCoupon.bind_type == 0" style="width:100%"> 
                        <label style="width:15%">选择商品:</label>
                        <el-select
                            v-model="addListId"
                            multiple
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入关键词"
                            :remote-method="remoteMethod"
                            style="width:80%"
                            @change="checkLength"
                            >
                            <el-option 
                                v-for="item in all"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="row">
                    <div class="item">
                        <label>优惠券类型:</label>
                        <el-select v-model="addCoupon.coupon_method" placeholder="请选择">
                            <el-option
                                v-for="item in coupon_method_select"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="row">
                    <div class="item">
                        <label>优惠券规则:</label>
                        <div class="rulesInput">
                            <div v-if="addCoupon.coupon_method == '满减券'">
                                <span>满</span>
                                <el-input v-model="addCoupon.full" style="width:50px;"></el-input>
                                <span>减 </span>
                                <el-input v-model="addCoupon.reduce" @blur="checkFull"></el-input>
                            </div>
                            <div v-else-if="addCoupon.coupon_method == '立减券'">
                                <label>立减劵: </label>
                                <el-input v-model="addCoupon.now_reduce_money" @blur="checkNum(addCoupon.now_reduce_money,'lijian')"></el-input> 元
                            </div>
                            <div v-else>
                                <label>折扣劵：</label>
                                <el-input v-model="addCoupon.discount" @blur="checkNum(addCoupon.discount,'zhekou')"></el-input> 折
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="item">
                        <label>过期时间:</label>
                        <el-date-picker
                            v-model="addCoupon.expiration_time"
                            type="date"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </div>
                <div class="row">
                    <div class="item">
                        <label>生成数量:</label>
                        <el-input v-model="addCoupon.num"></el-input>
                    </div>
                </div>
                <!-- <p>{{disabled}}</p> -->
            </div>
             <div style="display:flex;justify-content:center">
                <el-button type="primary" @click="submitCoupon" :disabled="disabled">添加</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="bindDialogVisible" :title="bindDialogTitle" width="30%">
            <el-table
            :data="bindDetailsInfo.limit_info"
            border
            style="width: 100%"
            v-if="bindDetailsInfo.bind_type == 0"
            key="limit_info"
            >
                <el-table-column
                prop="name"
                label="商品名"
                >
                </el-table-column>
                <el-table-column
                label="商品所属分类"
                >
                    <template slot-scope="scope">
                        {{getCategory(scope.row.category_id)}}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </el-row>
</template>
<script>
import category_id from '../../tool/category_id'
export default {
    data(){
        return {
            details:false,
            list:[],
            coupon_type:'all',
            coupon_type_select:[
                {
                    value:'all',
                    label:'所有商品'
                }
            ],
            coupon_method_select:[
                {
                    value:'满减券',
                    label:'满减'
                },
                {
                    value:'立减券',
                    label:'立减',
                },
                {
                    value:'折扣券',
                    label:'折扣'
                }
            ],
            dialogTableVisible:false,
            addCoupon:{
                coupon_name:'',     //优惠券名
                coupon_method:'满减券',   //类型
                full:'',            //满额
                reduce:'',          //减额
                now_reduce_money:'',    //立减
                discount:'',            //折扣
                expiration_time:'',     //过期时间
                num:'' ,                 //生成数量
                bind_type:0,            //限制类型
                categorys_id:[],
                goods_id:[]
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            }, 
            code_info:[],
            batch_id:'',
            code_page:{
                total:10,
                page:1,
            },
            list_page:{
                total:10,
                page:1,
            },
            page_size:10,
            total:10,
            back_page:1,
            bindTypeOptions: [
                {
                    value:0,
                    label:'限定商品'
                },
                {
                    value:1,
                    label:'限定分类'
                },{
                    value:2,
                    label:'全部商品'
                }
            ],
            category_id:[],
            goodsList:[],
            addListId:[],
            all:[],
            bindDialogVisible:false,
            bindDialogTitle:'限定商品',
            bindDetailsInfo:[],
            todayTime:0,      // 现在的时间
        }
    },
    computed:{
        disabled(){
            let {coupon_name,coupon_method,full,reduce,now_reduce_money,discount,expiration_time,num,bind_type,categorys_id,goods_id} = this.addCoupon
            if( coupon_name && num && expiration_time){
                switch(coupon_method){
                    case '满减券':
                    if(full && reduce){
                        var boolen = this.checkDisable()
                        console.log('满减券',boolen)
                        return boolen
                    }else{
                        return true
                    }
                    break;
                    case '立减券':
                    if(now_reduce_money){
                        var boolen = this.checkDisable()
                        console.log('立减券',boolen)
                        return boolen
                    }else{
                        return true
                    }
                    break;
                    case '折扣券':
                    if(discount){
                        var boolen = this.checkDisable()
                        console.log('折扣券',boolen)
                        return boolen
                    }else{
                        return true
                    }
                }
            }else{
                return true
            }
        },
    },
    methods:{
        getActivity(){
            var obj = {}
            if(this.batch_id){
                obj = Object.assign({},{batch_id:this.batch_id,page:this.code_page.page,page_size:this.page_size})
            }else{
                obj = Object.assign({},{page:this.list_page.page,page_size:this.page_size})
            }
            this.$http.get(this.apiObj.coupon,obj).then(data=>{
                if(data.status==200){
                    if(this.batch_id){
                        this.code_info = data.content.code_info
                        this.code_page.total = data.content.code_num
                    }else{
                        this.list = data.content.coupon_info
                        this.list_page.total = data.content.coupon_num
                    }
                }
            })
        },
        // 获取所有商品
        getAllGoods(){
            this.$http.get(this.apiObj.goodsList).then(data=>{
                if(data.status == 200){
                    this.goodsList = data.content.goods_info
                }
            })
        },
        // 页码改变时触犯函数
        listPageChange(page){
            this.list_page.page = page
            var page_num = this.total/this.page_size
            if(this.page > Math.ceil(page_num)){
                return false
            }
            // console.log('list.page',this.list_page.page)
            this.back_page = page
            this.getActivity()
        },
        codePageChange(page){
            this.code_page.page = page
            // console.log('code.page',this.code_page.page)
            this.getActivity()
        },
        // 生成优惠券
        submitCoupon(){
            if(this.addCoupon.coupon_method == '满减券'){
                this.addCoupon.discount = ''
                this.addCoupon.now_reduce_money = ''
            }else if(this.addCoupon.coupon_method == '立减券'){
                this.addCoupon.full = ''
                this.addCoupon.reduce = ''
                this.addCoupon.discount =''
            }else{
                this.addCoupon.full = ''
                this.addCoupon.reduce = ''
                this.addCoupon.now_reduce_money = ''
            }
            if(this.addCoupon.bind_type == 0){
                this.addCoupon.goods_id = JSON.stringify(this.addListId)
                this.addCoupon.categorys_id = ''
            }else{
                this.addCoupon.categorys_id = JSON.stringify(this.addCoupon.categorys_id)
                this.addCoupon.goods_id = ''
            }
            console.log(this.addCoupon)
            this.$http.post(this.apiObj.coupon,this.addCoupon).then(data=>{
                if(data.status == 200){
                    this.dialogTableVisible = false
                    this.getActivity()
                    this.$message.success(`${data.content.msg}`)
                }else{
                    this.$message.error(`${data.content.msg}`)
                }
            })
        },
        getDetails(value){
            this.batch_id = value
            this.details = true
            console.log('code.page',this.code_page.page)
            this.getActivity()
        },
        back(){
            this.details = !this.details
            this.code_page.page = 1
            // console.log('list.page',this.list_page.page)
            this.batch_id=''
        },
        remoteMethod(query) {
            if (query !== '') {
                var goodsList = this.goodsList
                this.all = query ? goodsList.filter(item=>item.name.indexOf(query)!=-1) : goodsList
            } else {
                this.all = this.goodsList;
            }
        },
        checkLength(){
            let length = this.addListId.length
            this.addCoupon.goods_id = this.addListId
            if(length>5){
                this.addListId.splice(5,1)
                this.$message.error('最多仅能选择5种商品')
            }
            
        },
        // 满减金额检查
        checkFull(){
            let {full,reduce} = this.addCoupon
            if(!full || !reduce){
                this.$message.error('不能为空')
            }
            if(full.indexOf('.') != -1 || reduce.indexOf('.') !=-1){
                this.$message.error('不能输入小数点')
                return
            }else if(full*1<reduce*1){
                this.$message.error('减额不能大于满额')
                return
            }
        },
        checkNum(num,type){
            // var num = num*1
            if(!num){
                this.$message.error('不能为空')
                return
            }else{
                if(num*1 <= 0){
                    this.$message.error('必须大于0')
                    return
                }else{
                    switch(type){
                        case 'zhekou':
                            let index = num.indexOf('.')
                            if(num >10 ){
                                this.$message.error('折扣最低为10折')
                                return
                            }
                            if(index != -1){
                                let a = num.slice(index+1)
                                let result = num.slice(0,index+2)
                                this.addCoupon.discount = result
                                if(a.length > 1){
                                    this.$message.error('只保留小数点后一位')
                                }
                            }
                            break;
                        case 'lijian':
                            let i = num.indexOf('.')
                            if(i!=-1){
                                var a = num.slice(i+1)
                                var result = num.slice(0,i+3)
                                this.addCoupon.now_reduce_money = result
                                if(a.length>2){
                                    this.$message.error('只保留小数点后2位')
                                }
                            }
                    }
                }
            }
        },
        checkDisable(){
            let {coupon_name,coupon_method,full,reduce,now_reduce_money,discount,expiration_time,num,bind_type,categorys_id,goods_id} = this.addCoupon
            if(bind_type == 0 || bind_type){
                switch(bind_type){
                    case 0 :
                    if( goods_id.length!=0 ){
                        return false
                    }else{
                        return true
                    }
                    break;
                    case 1 :
                    if( categorys_id.length>0 ){
                        return false
                    }else{
                        return true
                    }
                    break;
                    case 2 :
                    return false
                    break;
                }
            }
        },
        bindDialog(value){
            let { bind_type,limit_info } = value
            this.bindDialogVisible = true
            this.bindDetailsInfo = {limit_info,bind_type}
        },
        // 根据分类ID获取分类名
        getCategory(id){
            for (let i of category_id) {
                if (id == i.value) {
                    return i.label;
                }
            }
        },
        getDateTime(strTime){
            let date = new Date(strTime+' 23:59:59') 
            return date
        }
    },
    mounted(){
        this.getActivity()
        this.getAllGoods()
        this.category_id = category_id
        this.todayTime = new Date().getTime()
    }
}
</script>

<style lang="scss" scoped>
.rulesInput{
    width: 70%;
    /deep/ .el-input{
        width: auto !important;
    }
    /deep/ input{
        text-align: center;
        width: 50px;
        padding:0;
    }
}
.el-select{
    /deep/ .el-input{
        width: 60%;
    }
}
.box-card {
    width: 480px;
}
.bindList{
    padding-bottom: 10px;
    &:last-child{
        padding-bottom: 0;
    }
}
.tips-list{
    padding: 0 10px;
    .item{
        padding-bottom: 10px;
        &:last-child{
            padding: 0;
        }
    }
}
</style>

